<template>
	<view>
		<!-- 列表 S -->
		<view class="tp-ptb0lr30">
			<view @click="handleChooseRider(item)" class="tp-bgf tp-br12 tp-mt20 tp-ptb0lr30 tp-pt20 tp-pb20 tp-bbox tp-fc666 tp-fz28"
			 v-for="(item,index) in riderPersionList" :key="index">
				<view class="level_align  flex_between tp-h64">
					<view class="level_align">
						<text class="tp-fc333 tp-fz30 tp-fw600 tp-mr30">{{item.passengerName}}</text>
						<text>{{item.fareType}}</text>
					</view>
					<uni-icons v-if="item.choosed" class="choose-icon" color="#FFAF3C" type="circle-filled" size="22"></uni-icons>
					<uni-icons v-else class="choose-icon" color="#999" type="circle" size="22"></uni-icons>
				</view>
				<view class="level_align">
					<text>电话： </text><text>{{item.phone}}</text>
				</view>
				<view class="level_align tp-h64">
					<text>{{item.certTypeName}}： </text><text>{{item.star}}</text>
				</view>
			</view>
		</view>
		<!-- 列表 E -->
		<view class="center_combo tp-h98" v-if="showLoadMore">{{loadMoreText}}</view>

		<view class="tp-h98 tp-mt20"></view>
		<view class="tp-bgf tp-btn-h100 tp-ptb0lr20 tp-h98 level_align flex_around tp-fcF tp-fz32 tp-ls4">
			<view @click="handleGoBusAddRider" class="tp-h72 center_combo tp-br12" style="background: #FFAF3C;width: 330rpx;">
				添加成员
			</view>
			<view @click="handleConfirmChoosedRider" class="tp-h72 center_combo tp-br12 tp-bc" style="width: 330rpx;">
				确定添加
			</view>
		</view>
	</view>
</template>

<script>
	import utils from "../../utils/utils.js"
	export default {
		data() {
			return {
				riderPersionList: [], // 列表
				maxNum: null, // 最大选择人数
				page: {
					pageNum: 1,
					totalPageNum: 0,
					pageSize: 20,
					last_page: 2
				},

				loadMoreText: "加载中...",
				showLoadMore: false, // 加载更多
			};
		},
		onLoad(opt) {
			if(opt.maxNum){
				this.maxNum = opt.maxNum
			}
		},
		onShow() {
			this.getRiderList()
		},
		// 上拉触底
		onReachBottom() {
			this.showLoadMore = true;
			if (this.page.pageNum < this.page.last_page) {
				this.page.pageNum++
				this.getRiderList();
			} else {
				this.loadMoreText = "已没有更多数据!"
			}
		},
		methods: {
			// 添加编辑联系人
			handleGoBusAddRider(item) {
				uni.navigateTo({
					url: '/pagesTravel/bus.addRider?id=' + item.id + '&shiftsId=-1&scene=1'
				});

			},
			// 选取乘车人 确定
			handleConfirmChoosedRider() {
				let arr = this.$store.getters.getRiderList
				let checkNum = 0
				this.riderPersionList.forEach((item, index) => {
					if (item.choosed) {
						checkNum++
						this.$store.commit('upRiderList', item)
					} else {
						arr.forEach((it_, in_) => {
							if (it_.id == item.id) {
								this.$store.commit('delRiderList', in_)
							}
						})
					}
				})
				if (this.maxNum && checkNum > this.maxNum) return uni.showToast({
					title: '当前要添加乘客数量超出预选！',
					icon: 'none'
				})
				uni.navigateBack({
					delta: 1
				});
			},
			// onshow 获取乘客列表信息
			getRiderList() {
				let api = this.$api.passageListSecond + '?pageSize=10&pageNum=' + this.page.pageNum
				this.$http.get(api).then(res => {
					if (res.code === 200) {
						res.data.result.map(item => {
							item.star = utils.employStarHidden(item.certificateNumber, 4, 4)
							item.choosed = false
						})
						this.page.totalPageNum = res.data.total
						this.page.last_page = res.data.pageTotal
						if (this.page.pageNum > 1) {
							this.riderPersionList = this.riderPersionList.concat(res.data.result);
						} else {
							this.riderPersionList = res.data.result
						}
						this.updateRiderList()
					}
				})
			},

			updateRiderList() {
				const storage = this.$store.getters.getRiderList
				const arr = this.riderPersionList
				arr.forEach((it_a, in_a) => {
					storage.forEach((it_s, in_s) => {
						if (it_a.id === it_s.id) {
							return it_a.choosed = true
						}
					})
				})
				uni.hideLoading()
			},
			// 切换是否被选中
			handleChooseRider(item) {
				return item.choosed = !item.choosed
			},
		}
	}
</script>

<style lang="scss">

</style>
